{{-- 继承布局模板 --}}
@extends( 'mofa.layouts.main-layout' )


{{--  当前页面的样式表 --}}
@section('style')
    <link rel="stylesheet" type="text/css" href="{{ asset('mofa/css/2D-virtual-try-on.css') }}">
@endsection()


{{-- 插入标题 --}}
@section('title')
    <title>广州魔发科技有限公司,发型虚拟试戴</title>
@endsection

@section('content')
    <!-- 海报 -->
    <section class="banner optometry">
        <div class="banner-text-wrapper">
            <div class="banner-text">
                <div class="title"></div>
                {{--<a class="button" target="_blank" href="https://hair-2d.gzmofa.com/hair2d/tryon/index.html?cid=1&hid="></a>--}}
            </div>
        </div>
    </section>

    <!-- 页面导航 -->
    <section class="navigation">
        <ul class="navigation-list bym-not-list bym-wrapper clearfix">
            <li class="navigation-list-item product-introduce-li">
                <a href="#introduction">
                    <i class="item-icon">
                        <span class="product-introduce"></span>
                        {{--<img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-introduction.png"--}}
                        {{--alt="">--}}
                    </i>
                    <p class="item-name">服务介绍</p>
                </a>
            </li>
            <li class="navigation-list-item using-scenario-li">
                <a href="#scenario">
                    <i class="item-icon">
                        <span class="using-scenario"></span>
                        {{--<img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-scenario.png"--}}
                        {{--alt="">--}}
                    </i>
                    <p class="item-name">应用场景</p>
                </a>
            </li>

            <li class="navigation-list-item product-func-li">
                <a href="#function">
                    <i class="item-icon">
                        <span class="product-func"></span>
                        {{--<img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-function.png"--}}
                        {{--alt="">--}}
                    </i>
                    <p class="item-name">产品功能</p>
                </a>
            </li>
            <li class="navigation-list-item main-advantage-li">
                <a href="#advantage">
                    <i class="item-icon">
                        <span class="main-advantage"></span>
                        {{--<img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-advantage.png"--}}
                        {{--alt="">--}}
                    </i>
                    <p class="item-name">核心优势</p>
                </a>
            </li>
            <li class="navigation-list-item customer-case-li">
                <a href="#partner">
                    <i class="item-icon">
                        <span class="customer-case"></span>
                        {{--<img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-case.png"--}}
                        {{--alt="">--}}
                    </i>
                    <p class="item-name">客户案例</p>
                </a>
            </li>

        </ul>
    </section>

    <!-- 产品介绍 -->
    <section class="introduction optometry" id="introduction">
        <div class="bym-wrapper">
            <div class="introduction-header">
                服务介绍
            </div>
            <div class="introduction-title">
                2D发型虚拟试戴服务
            </div>
            <p class="introduction-desc">
                2D发型试戴是一种基于单张照片实现虚拟换发的技术。用户只需上传个人照片即可更换发型、发色，体验不同的发型效果。系统自动识别脸型、定位发型的位置，用户也可以手动缩放或平移发型，使试戴效果呈现最佳状态。一键试戴和试戴对比可以帮助用户快速精准找到适合自己的发型。本产品适用于APP、微信商城及PC网站虚拟换发功能接入，具有接入速度快、成本低等优势。
            </p>
            <div class="introduction-picture"></div>

        </div>
    </section>
    <!-- 产品介绍 end -->

    <!-- 场景 -->
    {{--<div class="introduction-header">--}}
        {{--场景介绍--}}
    {{--</div>--}}
    {{--<section class="scenario optometry" id="scenario">--}}


    {{--</section>--}}


    <!-- 功能 -->
    <section class="function" id="partner">
        <div class="bym-wrapper">
            <div class="function-header">
            产品功能
            </div>
            <!-- Swiper -->
            <div class="service-content">
                <div class="swiper-container" ref="partner-swiper">
                    <div class="swiper-wrapper" style="">
                        <div class="swiper-slide">
                            <div class="function-content-item">
                                <div class="item-picture">
                                    <img src="https://magic-hair-site.gz.bcebos.com/2d-virtual-try-on/face-recognition.png"
                                         alt="">
                                    <h4 class="item-text-name">自动识别脸型</h4>
                                    <p class="item-text-summary">通过分析人脸图片，精准计算出面部关键尺寸，并自动判定用户脸型类别。</p>
                                </div>

                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="function-content-item">
                                <div class="item-picture">
                                    <img src="https://magic-hair-site.gz.bcebos.com/2d-virtual-try-on/hairstyle-recommended.png"
                                         alt="">
                                    <h4 class="item-text-name">智能推荐发型</h4>
                                    <p class="item-text-summary">不同的脸型匹配不同的发型/假发。系统根据脸型识别的结果，自动为用户推荐适合其脸型的发型/假发。</p>
                                </div>

                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="function-content-item">
                                <div class="item-picture">
                                    <img src="https://magic-hair-site.gz.bcebos.com/2d-virtual-try-on/2d-try-on.png"
                                         alt="">
                                    <h4 class="item-text-name">2D发型试戴</h4>
                                    <p class="item-text-summary">通过拍照或上传个人照片实现发型/假发试戴，让用户预先了解换发型/假发后的效果。</p>
                                </div>

                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="function-content-item">
                                <div class="item-picture">
                                    <img src="https://magic-hair-site.gz.bcebos.com/2d-virtual-try-on/try-all-in-one.png"
                                         alt="">
                                    <h4 class="item-text-name">一键试戴</h4>
                                    <p class="item-text-summary">一秒试戴店铺内所有的发型产品，并以列表形式呈现试戴效果，方便用户挑选合适自己的发型/假发。</p>
                                </div>

                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="function-content-item">
                                <div class="item-picture">
                                    <img src="https://magic-hair-site.gz.bcebos.com/2d-virtual-try-on/try-on-contrast.png"
                                         alt="">
                                    <h4 class="item-text-name">对比试戴</h4>
                                    <p class="item-text-summary">对于有挑选困难症，可以几款发型/假发同时试戴对比,帮助您做出合理的选择。</p>
                                </div>

                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="function-content-item">
                                <div class="item-picture">
                                    <img src="https://magic-hair-site.gz.bcebos.com/2d-virtual-try-on/social-sharing.png"
                                         alt="">
                                    <h4 class="item-text-name">社交分享传播</h4>
                                    <p class="item-text-summary">自动生成发型/假发试戴照片，分享给好友、朋友圈、微博等社交平台。帮助商家传播引流吸粉。</p>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-button-next" @click="next()"></div>
            <div class="swiper-button-prev" @click="prev()"></div>
        </div>
        </div>
    </section>



    <!-- 功能 END -->

    <!-- 优势 -->
    <section class="advantage optometry" id="advantage">

        <div class="bym-wrapper">
            <div class="advantage-header">
                产品优势
            </div>

            <ul class="advantage-list bym-not-list clearfix">
                <li class="advantage-list-item">
                    <img src="https://magic-hair-site.gz.bcebos.com/2d-virtual-try-on/easy-access.png" alt="">
                    <h4 class="item-title">接入简单</h4>
                    <p class="item-desc">15分钟，轻松搞定！</p>
                </li>
                <li class="advantage-list-item">
                    <img src="https://magic-hair-site.gz.bcebos.com/2d-virtual-try-on/multiple-platform.png" alt="">
                    <h4 class="item-title">多平台支持</h4>
                    <p class="item-desc">全面支持APP/网站/微商城，Android/IOS/Windows</p>
                </li>
                <li class="advantage-list-item">
                    <img src="https://magic-hair-site.gz.bcebos.com/2d-virtual-try-on/产品优势-03.png" alt="">
                    <h4 class="item-title">运营费用低</h4>
                    <p class="item-desc">基于单张照片实现虚拟发型试戴，素材制作以及开发成本均相对较低。</p>
                </li>
            </ul>
        </div>

    </section>
    <!-- 优势 end-->


    <!-- 合作伙伴 -->
    {{--<section class="partner" id="">--}}

        {{--<div class="bym-wrapper">--}}
            {{--<div class="partner-header">--}}
                {{--合作伙伴--}}
            {{--</div>--}}

            {{--<ul class="partner-list">--}}
                {{--<li class="partner-list-item">--}}
                    {{--<div class="item-picture">--}}
                        {{--<img src="https://benyamin.gz.bcebos.com/mofa/home/panx.png" alt="">--}}
                    {{--</div>--}}
                    {{--<p class="item-name">帕克西软件开发</p>--}}
                {{--</li>--}}
                {{--<li class="partner-list-item">--}}
                    {{--<div class="item-picture">--}}
                        {{--<img src="https://benyamin.gz.bcebos.com/mofa/home/igs.png" alt="">--}}
                    {{--</div>--}}
                    {{--<p class="item-name">新加坡IGS</p>--}}
                {{--</li>--}}

            {{--</ul>--}}
        {{--</div>--}}
    {{--</section>--}}
    <!-- 合作伙伴 END -->


@endsection

@section('script')
    {{--<script type="text/javascript" src="{{asset('mofa/js/production-optometry.js')}}"></script>--}}
    <script type="text/javascript" src="{{asset('mofa/js/2D-virtual-try-on.js')}}"></script>
@endsection